<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryList, deletePermission } from '@/api/system/menu';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { showWarningConfirm } from '@/hooks/arco/showWarningConfirm';
  import { Message } from '@arco-design/web-vue';
  import Edit from './edit.vue';

  const coverChildren = (data: any[]) => {
    data.forEach((e) => {
      if (e.permissions && e.permissions.length > 0) {
        e.children = e.permissions;
        coverChildren(e.children);
      }
    });
  };

  const page = usePageTable({
    searchForm: {
      state: {
        name: '',
        code: '',
        status: '',
      },
    },
    table: {
      fakePage: true,
      rowKey: 'id',
      apiFun: (params) => queryList(params),
      transformData(data) {
        coverChildren(data);
        return data;
      },
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 200,
          align: 'center',
        },
        {
          title: '权限代码',
          dataIndex: 'code',
          align: 'center',
        },
        {
          title: '名称',
          dataIndex: 'name',
          width: 150,
        },
        {
          title: '类型',
          dataIndex: 'permissionType',
          width: 150,
          align: 'center',
          slotName: 'permissionType',
        },
        {
          title: '排序',
          dataIndex: 'orders',
          width: 100,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          slotName: 'action',
          align: 'center' as const,
        },
      ],
    },
  });

  const editModal = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });
  const showDetail = (record: any) => {
    // console.
    editModal.showEdit(record);
  };

  const onDeletePermission = (record: any) => {
    // console.log(record);
    showWarningConfirm({
      title: '警告',
      content: '确认删除吗？',
      onBeforeOk: () => deletePermission(record.id),
      onSuccess() {
        Message.success('删除成功');
        page.reload();
      },
    });
  };
</script>

<template>
  <div class="col">
    <Edit v-bind="editModal.bindProps" />
    <TableLayout v-bind="page.bindProps" @create="editModal.showAdd()">
      <template #searchForm="{ state }">
        <a-form-item field="staffName" label="名称" label-col-flex="60px">
          <a-input
            v-model="state.staffName"
            placeholder="请输入名称"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="code" label="账号" label-col-flex="60px">
          <a-input v-model="state.code" placeholder="请输入账号" allow-clear />
        </a-form-item>

        <a-form-item field="status" label="状态" label-col-flex="60px">
          <a-select v-model="state.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">启用</a-option>
            <a-option :value="0">禁用</a-option>
          </a-select>
        </a-form-item>
      </template>

      <template #permissionType="{ record }">
        <dict-tag type="RpPermissionType" :value="record.permissionType" />
      </template>

      <template #action="{ record }">
        <a-space>
          <ae-button purpose="edit" @click="showDetail(record)">
            编辑
          </ae-button>
          <ae-button purpose="delete" @click="onDeletePermission(record)">
            删除
          </ae-button>
        </a-space>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
